<template>
  <div>
    <img src="@/images/bj.png" alt="" class="bjbox" />
    <img src="@/images/title.png" alt="" class="title" />
    <img src="@/images/date.png" alt="" class="datebox" />
    <img src="@/images/post.png" alt="" class="postbox" />
    <img src="@/images/xzdy.png" alt="" class="xzdy" />

    <div class="y1box" @click="go(tpdata[0])">
      <img src="@/images/y1.png" alt="" class="" />
      <div class="yname">{{ tpdata[0].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[0].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[0].pwd }}</div>
      </div>
    </div>
    <div class="y2box" @click="go(tpdata[1])">
      <img src="@/images/y2.png" alt="" class="" />
      <div class="yname">{{ tpdata[1].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[1].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[1].pwd }}</div>
      </div>
    </div>
    <div class="y3box" @click="go(tpdata[2])">
      <img src="@/images/y3.png" alt="" class="" />
      <div class="yname">{{ tpdata[2].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[2].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[2].pwd }}</div>
      </div>
    </div>
    <div class="y4box" @click="go(tpdata[3])">
      <img src="@/images/y4.png" alt="" class="" />
      <div class="yname">{{ tpdata[3].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[3].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[3].pwd }}</div>
      </div>
    </div>
    <div class="y5box" @click="go(tpdata[4])">
      <img src="@/images/y5.png" alt="" class="" />
      <div class="yname">{{ tpdata[4].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[4].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[4].pwd }}</div>
      </div>
    </div>
    <div class="y6box" @click="go(tpdata[5])">
      <img src="@/images/y6.png" alt="" class="" />
      <div class="ynamed">{{ tpdata[5].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[5].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[5].pwd }}</div>
      </div>
    </div>
    <div class="y7box" @click="go(tpdata[6])">
      <img src="@/images/y7.png" alt="" class="" />
      <div class="ynames">{{ tpdata[6].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[6].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[6].pwd }}</div>
      </div>
    </div>
    <div class="y8box" @click="go(tpdata[7])">
      <img src="@/images/y8.png" alt="" class="" />
      <div class="ynames">{{ tpdata[7].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[7].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[7].pwd }}</div>
      </div>
    </div>
    <div class="y9box" @click="go(tpdata[8])">
      <img src="@/images/y9.png" alt="" class="" />
      <div class="ynames">{{ tpdata[8].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[8].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[8].pwd }}</div>
      </div>
    </div>
    <div class="y10box" @click="go(tpdata[9])">
      <img src="@/images/y10.png" alt="" class="" />
      <div class="ynames">{{ tpdata[9].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[9].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[9].pwd }}</div>
      </div>
    </div>
    <div class="y11box" @click="go(tpdata[10])">
      <img src="@/images/y11.png" alt="" class="" />
      <div class="ynames">{{ tpdata[10].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[10].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[10].pwd }}</div>
      </div>
    </div>
    <div class="y12box" @click="go(tpdata[11])">
      <img src="@/images/y12.png" alt="" class="" />
      <div class="ynamess">{{ tpdata[11].name }}</div>
      <div class="des">
        <div class="desname"><span>账号：</span>{{ tpdata[11].username }}</div>
        <div class="despwd"><span>密码：</span>{{ tpdata[11].pwd }}</div>
      </div>
    </div>

    <!--  -->
    <el-dialog
      title="请扫描二维码"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="coderer">
        <img :src="codesrc" alt="" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'WorkspaceJsonLoaDing',

  data() {
    return {
      codesrc: '',
      dialogVisible: false,
      tpdata: window.config.tpdata
    }
  },

  mounted() {
    // console.log('获取JSON', window.config.tpdata)
  },

  methods: {
    go(i) {
      if (i.url != '') {
        window.open(i.url, '_blank') // 打开新标签页
      }
      if (i.codesrc != '' || i.url == '') {
        console.log('走了')

        this.$nextTick(() => {
          this.dialogVisible = true
          this.codesrc = i.codesrc
        })
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped></style>
